<template>

  <ElCascader v-model="content" ref="treeRef"  v-bind="attrs" :clearable="config.clearable"
              clearable
              filterable
              style="width: 100%;"
    :options="dataList" :props="defaultProps" :showAllLevels="showAllLevels" :onChange="onChange"
    :collapse-tags="collapseTags"
    :placeholder="placeholder">
  </ElCascader>
</template>
<script lang="ts" setup>
import ComponentUtils from "/@/utils/ComponentUtils.ts";

import { useAttrs } from 'vue'
import {TypeUtils} from "/@/utils/TypeUtils.ts";

const attrs = useAttrs()
const props = defineProps({
  modelValue: {

  },
  placeholder: {},

  config: {
    type: Object,
    default: () => ({
      placeholder: '请选择',
      modelValue: null,
      fullWidth: false,
      showAllLevels: true,
      clearable: true,
      url: null,
      props: {
        label: 'label',
        value: 'value',
        children: 'children',
        emitPath: false,
        checkStrictly: false,
        multiple: false
      }

    }),
  },
})
const emits = defineEmits(['update:modelValue', 'initData','change'])
const content = ref(null);
const dataList = ref(props.config && props.config.options || []);

const multiple= ref(props.config.props && props.config.props.multiple)
/** 获取数据源并处理成树结构 */
const getData = async () => {
  if (!props.config['optionsFunction'])
    return
  const options = await props.config['optionsFunction']();

  dataList.value =  options;
};
getData();

/** 处理选择变化 */
const onChange = (value) => {
  emits('update:modelValue',  value);
};

// /** 监听 modelValue 的变化 */
watch(
  () => props.modelValue,  // 监听传入的 modelValue
  (newValue) => {
    if (multiple.value) {
      content.value = ComponentUtils.setSelectValue(newValue);
    } else {
      content.value = newValue
    }
  }
,{immediate: true});
let defaultProp = {
  label: 'label',
  value: 'value',
  children: 'children',
  emitPath: false,
  checkStrictly: false,
  multiple: false,
}
const defaultProps = Object.assign(defaultProp, props.config.props);
const showAllLevels = ref(props.config.showAllLevels);
const collapseTags = ref(props.config.collapseTags)
onMounted(()=> {
})
</script>
<style lang="scss">
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
  height: 33px;
}
.el-cascader__tags {
  display: inline-flex;
  margin-right: 60px;
  flex-wrap: nowrap;
}
</style>
